<template>
	<view class="mine">
		<view class="top">
			<view class="title">
				<text class="name">源聚变</text>
				<view class="search">
					<input class="search-input" placeholder-style="color:#fff" type="text" value="" placeholder="百事可乐" />
					<image class="search-img" src="../../static/index/search.png" mode=""></image>
				</view>
			</view>
			<view class="personal-information">
				<image class="personal-information-img" src="../../static/mine/head.png" mode=""></image>
				<view class="information">
					<text>12345678912</text>
					<text>会员等级：童生</text>
					<text>贡献值：10007</text>
				</view>
			</view>
		</view>
		<view class="integral">
			<view class="integral-top">
				<view class="total" @click="clickIntegral">
					<text>合计</text>
					<text>1200积分</text>
				</view>
				<view class="invite">
					邀请好友最低可得100积分 >
				</view>
				<view class="invitenow" @click="invitenFirends">
					立即邀请好友
				</view>
			</view>
			<view class="integral-bottom">
				<view class="order" @click="jumpOrder">
					<image src="../../static/mine/组%20572.png" mode=""></image>
					<text>我的订单</text>
				</view>
				<view class="line"></view>
				<view class="shop-car" @click="jumpShopcar">
					<image src="../../static/mine/组%20573.png" mode=""></image>
					<text>我的购物车</text>
				</view>
			</view>
		</view>
		<view class="modules">
			<view class="modules-box" v-for="(item,index) in list" :key='index' @click="clickFirends(item)">
				<view style="width: 100%;height: 90rpx;display: flex;align-items: center;justify-content: center;">
					<image :style="{width:item.width+'rpx',height:item.height+'rpx'}" :src="item.img" mode=""></image> 
				</view>
					
				<text>{{item.text}}</text>
			</view>
		</view>
		<view class="system">
			<view class="system-top">
				<text>系统管理</text>
			</view>
			<view class="system-bottom">
				<view class="sys-box" v-for="(item,index) in systemList" :key=index @click="clickModel(item)">
					<image :src="item.img" mode=""></image>
					<text>{{item.text}}</text>
				</view>

			</view>
		</view>
		<view class="doohickey">
			<view class="doohickey-top">
				<text>积分获取小窍门</text>
			</view>
			<view class="doohickey-bottom">
				<view v-for="(item,index) in doohickeyList" :key=index class="doohickey-bottom-box" @click="jump(item.url)">
					<image :src="item.img" mode=""></image>
					<text>{{item.text1}}</text>
					<text>{{item.text2}}</text>
				</view>
			</view>
		</view> 
		 <!-- 联系客服 -->
		 <view class="serviceModel" v-show="isModel">
		 	<view class="serviceModel-box">
		 		<view class="serviceModel-top">
		 			<view class="serviceModel-title">
		 				联系客服
		 			</view>
					<view class="phone">
						尊敬的用户你好，目前只支持您使用手机拨
						打我们的客服热线：123-4561
					</view>
		 		</view>
				<view class="serviceModel-bottom" @click="isModel=false">
					确定
				</view>
		 	</view>
		 </view>
		<tabbar></tabbar>
	</view>
</template>

<script>
	import {
		tabbar
	} from "../../components/tabbar/tabbar.vue"
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				isModel:false,//联系客服
				list: [{
						img: require('../../static/mine/friends.png'),
						text: '我的好友',
						width:'72',
						height:'54',
						url:'/myPackageA/mine/myfirends'
					},
					{
						img: require('../../static/mine/course.png'),
						text: '新手教程',
						width:'84',
						height:'88',
						url:'/myPackageA/mine/naviceTutorial'
					},
					{
						img: require('../../static/mine/issue.png'),
						text: '常见问题',
						width:'80',
						height:'80',
						url:'/myPackageA/mine/commonProblem'
					},
					{
						img: require('../../static/mine/yaoqing.png'),
						text: '邀请好友',
						width:'60',
						height:'56',
						url:'/myPackageA/mine/share'
					}
				],
				systemList: [
					{
						img: require('../../static/mine/fahuo.png'),
						text: '待发货'
					},
					{
						img: require('../../static/mine/shouhuo.png'),
						text: '待收货'
					},
					{
						img: require('../../static/mine/daihuan.png'),
						text: '已收货'
					},
					
					{
						img: require('../../static/mine/kefu.png'),
						text: '联系客服'
					},
					{
						img: require('../../static/mine/zhengshu.png'),
						text: '我的公益',
						url:'/myPackageA/mine/system/publicWelfare'
					},
					{
						img: require('../../static/mine/address.png'),
						text: '地址管理',
						url:'/myPackageA/mine/system/address/address'
					},
					{
						img: require('../../static/mine/shoucang.png'),
						text: '我的收藏',
						url:'/myPackageA/mine/system/mycollection'
					},
					{
						img: require('../../static/mine/set.png'),
						text: '设置',
						url:'/myPackageA/mine/system/system'
					}
				],
				doohickeyList: [{
					img: require('../../static/mine/qiandao.png'),
					text1: '签到领积分',
					text2: '已连续签到1天',
					// url:'../luckDraw/luckDraw'
				}, {
					img: require('../../static/mine/dajiang.png'),
					text1: '积分抽大奖',
					text2: '最低50积分抽大奖',
					url:'/myPackageA/luckDraw/luckDraw'
				}, {
					img: require('../../static/mine/fenxiang.png'),
					text1: '每日分享',
					text2: '分享即可领积分1天',
					url:'/myPackageA/mine/share'
				}, ]
			}
		},
		methods: {
			//订单
			jumpOrder(){
				uni.navigateTo({
					url:'/myPackageA/mine/myOrder/myOrder'
				})
			},
			//购物车
			jumpShopcar(){
				uni.navigateTo({
					url:'/myPackageA/mine/shopCar/shopCar'
				})
			},
			clickModel(item){
				console.log(item.url);
				if(item.text=='联系客服'){
					this.isModel=true
				}
				if(item.text=='待发货'){
					uni.navigateTo({
						url:'/myPackageA/mine/myOrder/myOrder?current=1'
					})
				}
				if(item.text=='待收货'){
					uni.navigateTo({
						url:'/myPackageA/mine/myOrder/myOrder?current=2'
					})
				}
				if(item.text=='已收货'){
					uni.navigateTo({
						url:'/myPackageA/mine/myOrder/myOrder?current=3'
					})
				}
				uni.navigateTo({
					url:item.url
				})
			},
			jump(url){
				uni.reLaunch({
					url:url,
				})
			},
			clickIntegral(){
				uni.navigateTo({
					url:'/myPackageA/mine/integral'
				})
			},
			invitenFirends(){
				uni.navigateTo({
					url:'/myPackageA/mine/share'
				})
			},
			clickFirends(item){
				uni.navigateTo({
					url:item.url
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.serviceModel{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(142,141,140,0.82);
		.serviceModel-box{
			width: 670rpx;
			height: 394rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			position: absolute;
			top: 30%;
			left: 0;
			right: 0;
			margin: auto;
			display: flex;
			flex-direction: column; 
			.serviceModel-top{
				padding: 30rpx;
				width: 100%;
				height: 270rpx;
				border-bottom: 1px solid #F2F2F2;
				.serviceModel-title{
					margin-top: 22rpx;
					margin-bottom: 22rpx;
					text-align: center;
					font-size: 36rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}
				.phone{
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #BEBEBE;
					line-height: 50rpx;
				}
			}
			.serviceModel-bottom{
				height:124rpx ;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #FF7200;
			}
		}
	}
	.invitenow{
		width: 170rpx;
		height: 60rpx;
		background: #FF7200;
		border-radius: 30rpx;
		text-align: center;
		line-height: 60rpx;
		color: #FFFFFF;
		font-size:24rpx ;
		position: absolute;
		top: 48rpx;
		right: 12rpx;
	}
	.doohickey {
		margin: 0 40rpx 60rpx;
		width: 670rpx;
		height: 316rpx;
		background-color: #FFFFFF;
		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
		border-radius: 10rpx;

		.doohickey-top {
			width: 100%;
			height: 88rpx;
			border-bottom: 1px solid #ECEAEA;

			text {
				font-size: 39rpx;
				font-weight: 400;
				color: #333333;
				padding-left: 22rpx;
				display: inline-block;
				margin-top: 28rpx;
			}
		}

		.doohickey-bottom {
			display: flex;
			width: 100%;
			height: 228rpx;
			.doohickey-bottom-box {
				    display: flex;
				    flex-direction: column;
				    width: 32%;
				    align-items: center;
				    justify-content: center;
				image {
					width: 90rpx !important;
					height: 90rpx !important;
				}

				text:first-child {
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}

				text:last-child {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
				}
			}


		}
	}

	.system {
		margin: 0 40rpx 60rpx;
		width: 670rpx;
		height: 444rpx;
		background: #FFFFFF;
		box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
		border-radius: 10rpx;

		.system-top {
			width: 100%;
			height: 88rpx;
			border-bottom: 1px solid #ECEAEA;

			text {
				font-size: 39rpx;
				font-weight: 400;
				color: #333333;
				padding-left: 22rpx;
				display: inline-block;
				margin-top: 28rpx;
			}
		}

		.system-bottom {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;

			.sys-box {
				width: 25%;
				height: 178rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				image {
					width: 90rpx;
					height: 90rpx;
				}

				text {
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}
			}
		}
	}

	.modules {
		margin: 220rpx 40rpx 60rpx;
		width: 670rpx;
		height: 166rpx;
		background: #FFFFFF;
		box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.modules-box {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
		}
	}

	.mine {
		position: relative;
	}

	.integral {
		margin-bottom: 60rpx;
		width: 670rpx;
		height: 240rpx;
		border-radius: 20rpx;
		position: absolute;
		top: 348rpx;
		left: 40rpx;

		.integral-top {
			width: 100%;
			height: 158rpx;
			background-color: #000000;
			border-radius: 20rpx 20rpx 0 0;
			display: flex;
			flex-direction: column;
			line-height: 28rpx;
			position: relative;
			.total {
				padding: 44rpx 0 0rpx 22rpx;

				text:first-child {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FF7200;
				}

				text:last-child {
					font-size: 36rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #FF7200;
					margin-left: 20rpx;
				}
			}

			.invite {
				padding: 0 0 0 22rpx;
				color: #FFFFFF;
				font-size: 28rpx;
				margin-top: 22rpx;
			}
		}

		.integral-bottom {
			height: 82rpx;
			background-color: #FFFFFF;
			border-radius: 0 0 20rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.order {
				flex: 1;
				display: flex;
				justify-content: center;

				image {
					width: 34rpx;
					height: 38rpx;
					margin-right: 14rpx;
				}

				text {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #000000;
				}
			}

			.line {
				width: 4rpx;
				height: 32rpx;
				background: #F3F3F3;
			}

			.shop-car {
				flex: 1;
				display: flex;
				justify-content: center;

				image {
					width: 36rpx;
					height: 34rpx;
					margin-right: 14rpx;
				}

				text {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #000000;
				}
			}
		}
	}

	.top {
		width: 100%;
		height: 424rpx;
		background: linear-gradient(153deg, #DD85FC 0%, #2172EB 100%);
	}

	.personal-information {
		display: flex;

		.personal-information-img {
			width: 120rpx;
			height: 120rpx;
			margin: 46rpx 20rpx 0 40rpx;
		}

		.information {
			margin-top: 46rpx;
			display: flex;
			flex-direction: column;
			color: #FFFFFF;
			line-height: 46rpx;
			font-size: 28rpx;

			text:first-child {
				font-size: 36rpx;
			}
		}
	}

	.title {
		display: flex;
		align-items: center;
		width: 100%;
		height: 100rpx;

		.name {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			padding: 0 40rpx;
			margin-top: 8%;
		}

		.search {
			position: relative;
			margin-top: 8%;

			.search-input {
				background-color: rgba(225, 225, 225, 0.22);
				border-radius: 30rpx;
				padding-left: 60rpx;
				width: 302rpx;
				height: 64rpx;
				z-index: 99;
			}

			.search-img {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				top: 16rpx;
				left: 18rpx;
			}
		}
	}
</style>
